<template>
  <div class="ProjectList" style="margin:30px;">
    <el-row style="margin:30px;font-size:20px;">
      <span>项目列表</span>
    </el-row>
    <el-row style="margin:20px;">
      <el-input
        size="medium"
        v-model="inputQueryProject"
        placeholder="项目名称"
        style="width:200px;margin-right:20px;"
      ></el-input>
      <el-button size="medium" type="primary" @click="clickQueryProject">查询</el-button>
      <el-button size="medium" type="primary" @click="clickMessage('请联系管理员新增项目')">新增</el-button>
    </el-row>
    <!-- 项目列表table -->
    <el-table
      ref="multipleTable"
      :data="this.$store.state.PROJECT_LIST"
      header-align="center"
      :default-sort="{prop: 'key', order: 'descending'}"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      size="mini"
      style="width: 100%"
      v-loading="listLoading"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      <!-- 选择框 -->
      <el-table-column type="selection" width="50"></el-table-column>
      <!-- 索引 -->
      <el-table-column type="index" width="50"></el-table-column>
      <!-- 项目名称：sortable:表头排序，结合default-sort使用 -->
      <el-table-column label="项目名称" prop="name" sortable width="200px">
        <!-- 点击项目进入当前项目分组界面，并传入项目名称 -->
        <template slot-scope="scope">
          <!-- <router-link :to="'/project/' + scope.row.id " @click="clickSetProjectName(scope.row.name)">{{ scope.row.name }}</router-link> -->
          <el-link type="primary" @click="clickToGroupSetProjectName(scope.row.id,scope.row.name)">
            {{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="desc" width="200px"></el-table-column>
      <el-table-column label="创建者" prop="creator" sortable width="150px"></el-table-column>
      <el-table-column label="创建时间" prop="create_time" sortable width="150px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="clickMessage('请联系管理员进行编辑')">编辑</el-button>
          <el-button size="mini" type="danger" @click="clickMessage('只有管理员才能删除')">删除</el-button>
          <el-button size="mini" type="info" @click="clickMessage('只有管理员才能禁用')">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button size="mini" type="danger" style="margin:20px" @click="clickHandleDelete">批量删除</el-button> -->
  </div>
</template>

<script>
import {axiosGetProject,axiosQueryProject} from '../api/api';
import {PROJECT_NAME,PROJECT_ID,PROJECT_LIST} from '../components/common/const'
export default {
  data() {
    return {
      //查询项目输入框
      inputQueryProject: "",
      //等待提示组件
      listLoading: false,
      //项目列表
      // tableProjectList: [
      //   { 
      //     name: "王洋",
      //     desc: "asdasda",
      //     creator: "asfasf",
      //     create_time: "asfas"
      //   }
      // ],
      //table表格 选中的行 列表
      multipleSelection: []
    };
  },
  mounted() {
    if (this.$store.state.PROJECT_LIST.length === 0 ){
      this.getProjectList();
    }
  },
  methods: {
    //警告消息
    clickMessage(str){
      this.$message({
          message: str,
          type: 'warning'
        });
    },
    // 获取项目列表
    async getProjectList() {
      //开启等待提示
      this.listLoading = true;
      var self = this;
      // var params = { page: self.page, name: self.filters.name };
      //发起请求
      await axiosGetProject().then(res => {
        self.listLoading = false;
        if (res.status === 200 ) {
          this.$store.state.PROJECT_LIST = res.data;
        } else {
          self.$message.error({
            message: '获取项目列表失败！！！',
            //居中显示
            center: true
          });
        }
      }).catch((error) => 
        self.$message.error({message:error})
      )
    },
    //获取表格选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
      
    },
    //删除选中的数据
    clickHandleDelete() {},
    //查询项目
    clickQueryProject() {
      var self = this;
      let params = {"name":this.inputQueryProject};
      axiosQueryProject(params).then(res => {
        self.listLoading = false;
        if (res.status === 200) {
            this.$store.state.PROJECT_LIST = res.data;
        } else {
          self.$message.error({
            message: msg,
            //居中显示
            center: true
          });
        }
      }).catch((error) => 
        self.$message.error({message:error})
      )
    },
    //点击跳转至分组界面
    clickToGroupSetProjectName(id,name){
      // localStorage.setItem([PROJECT_NAME], name);
      // localStorage.setItem([PROJECT_ID], id);
      this.$store.state.PROJECT_NAME = name;
      this.$store.state.PROJECT_ID = id;
      this.$router.push('/project/'+id);
    },
  }
};
</script>